<template>
  <view class="notice">
    <template v-for="item in list">
      <view class="notice-item" :key="item.id">
        <view class="time">
          <view class="time-val"> {{item.time}} </view>
        </view>

        <view class="content">
          <view class="content-title"> 系统通知 </view>
          <view class="content-text">
            {{item.notice}}
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import {notice} from "@/utils/api"
export default {
  data() {
    return {
      list:[]
    };
  },
  onLoad(){
    this.initNotice();

  },
  methods:{
    // 消息列表
    initNotice(){
      notice().then(resp=>{
        console.log("消息通知",resp)
        if(resp.code==200){
          this.list=resp.data;
        }

      })
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.notice {
  width: 100%;
  box-sizing: border-box;
  padding: 25rpx 30rpx;
  &-item {
    margin-bottom: 35rpx;
    .time {
      text-align: center;
      &-val {
        line-height: 40rpx;
        background: #d5d5d5;
        border-radius: 8rpx;
        margin-bottom: 35rpx;
        color: #ffffff;
        font-size: 24rpx;
        display: inline-block;
        padding: 0 25rpx;
      }
    }
    .content {
      width: 100%;
      background-color: #ffffff;
      width: 100%;
      box-sizing: border-box;
      padding: 0 25rpx 30rpx 25rpx;
      &-title {
        color: #181616;
        font-size: 30rpx;
        line-height: 70rpx;
      }
      &-text {
        color: $color-AA;
        font-size: 26rpx;
        line-height: 34rpx;
        letter-spacing: 1rpx;
      }
    }
  }
}
</style>
